{% extends "base.html" %}

{% block title %}视频管理器{% endblock %}

{% block heard %}视频管理器{% endblock %}

{% block content %}
    <div class="layui-tab layui-tab-card" lay-filter="video">
      <ul class="layui-tab-title">
        <li class="layui-this" id="video_list">视频列表</li>
        <li id="search_video">搜索视频</li>
      </ul>
      <div class="layui-tab-content">
        <!--   视频列表     -->
        <div class="layui-tab-item layui-show">
          <div class="layui-collapse">
            {% for video in video_list %}
              <div class="layui-colla-item">
                <div class="layui-colla-title">{{ video.name }}</div>
                <div {% if loop.index == 1 %} class="layui-colla-content layui-show" {% else %} class="layui-colla-content" {% endif %}>
                  <div class="layui-collapse" lay-filter="filter-collapse">
                    {% for video in video.content %}
                      <div class="layui-colla-item">
                        <div class="layui-colla-title" url="{{ video.path }}" index="{{ loop.index }}">{{ video.name }}</div>
                        <div class="layui-colla-content">
                          <!-- 视频播放器容器 -->
                          <div id="{{ loop.index }}-videoContainer" class="layui-row">
                            <video id="{{ loop.index }}-videoPlayer" class="layui-col-md8" controls></video>
                          </div>
                        </div>
                      </div>
                    {% endfor %}
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>

        <!--   搜索视频     -->
        <div class="layui-tab-item">内容-2</div>
      </div>
    </div>
{% endblock %}

{% block js_content %}
    <script>
        layui.define('element',function(exports){
            var element = layui.element;
            // 输出接口
            exports('common', {
                run_start: function ()
                {
                    // 点击事件
                    element.on('collapse(filter-collapse)', function (){
                      let path = $(this).attr("url");
                      let index = $(this).attr("index");
                      // 分段播放视频
                      const videoPlayer = document.getElementById(index+"-videoPlayer");
                      // 开始分段播放
                      playSegment(0, 1024);

                      // 播放分段视频
                      function playSegment(start, end) {
                        $.ajax({
                            url: path,
                            type: 'GET',
                            headers: {
                                'Range': 'bytes=' + start + '-' + end,  // 设置Range头部，请求前1000字节数据
                            },
                            success: function (res) {
                                // 将接收到的数据填充到视频元素
                                var blob = new Blob([res], {type: 'video/mp4'});
                                var objectUrl = URL.createObjectURL(blob);
                                console.log("接受的数据------------", objectUrl);
                                videoPlayer.src = objectUrl;
                                videoPlayer.play();

                                // 监听视频播放结束事件
                                videoPlayer.onended = function() {
                                  // 播放下一个分段
                                  start = end + 1;
                                  playSegment(start, start + 1024);
                                };
                            },
                            error: function () {
                                layer.msg('Failed to Receive HTTP Range Data');
                            }
                        });
                      }

                    });

                    // tab 切换事件
                    element.on('tab(video)', function(data){
                      let id = $(this).attr('id');
                      console.log(id);
                    });
                }
            });
        });
    </script>
{% endblock %}